<!DOCTYPE html> 
<head>  
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        font-size: 12px;
        color: #030303;
        
        max-width: 750px; /*宽度*/
        margin: 0 auto;
        background-color: #ffffff;
    }

    .serach  {
        height: 50px;
        background:rgba(219, 243, 4, 0.938);
         padding: 0 12px;
         position: fixed;
         width: 100%;
         max-width: 750px; /*设置最大宽度*/
         z-index: 1;
         display: flex;
        align-items: center;
         overflow: hidden;

    }
    .serach .location{
        max-width: 120px;
        display: flex;
        align-items: center;
        /* 多出来的隐藏掉 */
        overflow: hidden; 


    }
    .serach .location span{
       flex: 1;
       /* 变为块级元素 */
       display: block;  
       font-size: 15px;
        overflow: hidden; 
        /*  强制在同一行内显示所有文本 */
        white-space: nowrap;
        /* 超出的部分显示....配合 overflow: hidden使用*/
        text-overflow: ellipsis; 


    }
    .icn_down{
        height: 15px;
        width: 15px;
        margin-left: 5px;
    }
    .serach-input{
        height: 30px;
        display: flex;
        align-items: center;
        /* 多出来的隐藏掉 */
        margin-left: 12px;
        flex: 1;  /*均分*/
        overflow: hidden; 
        border-radius: 30px;
        background-color: #ffffff;
    }
    .icn_search{
     
        width: 15px;
        margin-left: 12px;
        margin-right: 12px;
       
    }
    .serach-input input{
        background-color: none;
        border: 0;
        flex: 1;
        outline: none;
    }

</style>


</head>
<body>
<div class="serach">    
    <div class="location">  

        <span>平顶山
            <!-- <img src="https://p0.meituan.net/travelcube/45c79a92755b54adc9dc1c4682b123b3201.png" class="icn_down"> -->
        </span>
    
        <img src="https://p0.meituan.net/travelcube/45c79a92755b54adc9dc1c4682b123b3201.png" class="icn_down">
    </div>
    <div class="serach-input">
        <img src="https://p0.meituan.net/travelcube/99c29829cf1b85d5cdbc76a1bd0b7329814.png" class="icn_search">
           <input type="text" placeholder="属兔是否会搜房">
    
       
    </div>


</div>
</body>



